import React, { useState, createContext, useContext, useReducer } from 'react'
const CounContext = createContext()
function Counter() {
  console.log(123)
  const count = useContext(CounContext)
  return <div>{count}</div>
}

function TestContext() {
  // const [count, setCount] = useState(0)

  const [count, dispatch] = useReducer((state, action) => {
    switch (action) {
      case 'add':
        return state + 1
      case 'sub':
        return state - 1
      default:
        return state
    }
  }, 0)
  return (
    <div>
      <p>clicks {count} times</p>
      <button
        onClick={() => {
          dispatch('add')
        }}
      >
        add one
      </button>
      <CounContext.Provider value={count}>
        <Counter></Counter>
      </CounContext.Provider>
    </div>
  )
}

export default TestContext
